<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="用户名称">
        <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
      </el-form-item>
      <!-- 用户手机号 -->
      <el-form-item label="手机号">
        <el-input v-model="form.phone" placeholder="请输入用户手机号" />
      </el-form-item>
      <!-- 用户密码 -->
      <el-form-item label="用户密码">
        <el-input v-model="form.password" type="password" placeholder="请输入用户密码" />
      </el-form-item>
      <!-- 角色 -->
      <el-form-item label="用户角色" required>
        <el-radio v-model="form.role" label="1">管理员</el-radio>
        <el-radio v-model="form.role" label="0">顾客  </el-radio>
      </el-form-item>
      <!--  -->
      <el-form-item label="用户地址">
        <el-input v-model="form.address" placeholder="请输入用户地址" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="refresh">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { registerUser } from '@/api/user.js'
export default {
  data() {
    return {
      form: {
        nickName: '',
        phone: '',
        password: '',
        address: '',
        role: '0'
      }
    }
  },
  methods: {
    onSubmit() {
      registerUser(this.form).then((response) => {
        console.log(response)
        if (response.code === '0') {
          this.$message({
            type: 'success',
            message: '创建用户成功'
          })
          setTimeout(() => {
            this.refresh()
          }, 700)
        } else {
          this.$message({
            type: 'error',
            message: '用户失败'
          })
        }
      })
    },
    refresh() {
      this.form = {
        nickName: '',
        phone: '',
        password: '',
        address: '',
        role: '0'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  width: 50%;
}
.line{
  text-align: center;
}
</style>

